.Search {
  & {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FEFEFE;
  }

  .top {
    & {
      height: 0.6rem;
      width: 92%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .back {
      height: 0.18rem;
      width: 0.18rem;
    }

    .box {
      & {
        width: calc(100% - 0.48rem - 0.4rem);
        height: 0.36rem;
        border-radius: 0.06rem;
        background-color: #F5F5F5;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .s {
        height: 0.16rem;
        width: 0.16rem;
        margin-left: 0.12rem;
      }

      .x {
        margin-right: 0.12rem;
        height: 0.16rem;
        width: 0.16rem;
      }

      input {
        width: calc(100% - 0.32rem - 0.24rem - 0.2rem);
        color: #101010;
        font-size: 0.14rem;
        background-color: #F5F5F5;
        border: none;
      }

      input::-webkit-input-placeholder {
        color: #909497;
        font-size: 0.14rem;
      }

      input:-moz-placeholder {
        color: #909497;
        font-size: 0.14rem;
      }

      input::-moz-placeholder {
        color: #909497;
        font-size: 0.14rem;
      }

      input:-ms-input-placeholder {
        color: #909497;
        font-size: 0.14rem;
      }


    }

    .btn {
      width: 0.4rem;
      font-size: 0.16rem;
      color: #101010;
    }

    .scroll {
      & {
        position: absolute;
        z-index: 100;
        top: 100%;
        width: 100%;
        height: 2.6rem;
        border-bottom-left-radius: 0.1rem;
        border-bottom-right-radius: 0.1rem;
        background-color: #efefef;
      }

      .imagine {
        & {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          border-bottom-left-radius: 0.1rem;
          border-bottom-right-radius: 0.1rem;
          background-color: #efefef;
          padding-bottom: 0.1rem;
        }

        .item {
          width: 92%;
          height: 0.38rem;
          align-self: center;
          // border-bottom: 0.6px solid var(--thin-line-color);
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 0.14rem;
          color: #9A9A9A;
        }
      }
    }
  }

  .scroll {
    & {
      width: 92%;
      height: calc(100% - 0.6rem);
    }

    .content {
      & {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
      }

      .history {
        & {
          width: 100%;
          margin-top: 0.1rem;
          display: flex;
          flex-direction: column;
        }

        .top1 {
          & {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            color: #101010;
          }

          .title {
            font-size: 0.16rem;
            font-weight: bold;
          }

          .clear {
            & {
              display: flex;
              flex-direction: row;
              align-items: center;
            }

            img {
              height: 0.16rem;
              width: 0.16rem;
            }

            span {
              margin-left: 0.03rem;
              color: #9A9A9A;
              font-size: 0.14rem;
            }
          }
        }

        .box {
          & {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
          }

          .item {
            width: 50%;
            margin-top: 0.23rem;
            font-size: 0.14rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .hotwords {
        & {
          width: 100%;
          margin-top: 0.3rem;
          display: flex;
          flex-direction: column;
        }

        .top1 {
          & {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            color: #101010;
            margin-bottom: 0.1rem;
          }

          .title {
            font-size: 0.16rem;
            font-weight: bold;
          }

          .refresh {
            & {
              display: flex;
              flex-direction: row;
              align-items: center;
            }

            img {
              height: 0.15rem;
              width: 0.15rem;
              margin-left: 0.08rem;
              transition: all 1s;
            }

            span {
              color: var(--error);
              font-size: 0.14rem;
            }
          }
        }

        .box {
          & {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
          }

          .item {
            & {
              width: 30%;
              height: 0.35rem;
              margin-top: 0.1rem;
              font-size: 0.14rem;
              border-radius: 0.05rem;
              border: 1px solid rgba(187, 187, 187, 100);
              display: flex;
              justify-content: center;
              align-items: center;
            }

            span {
              width: 85%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }

      }

      .yourlike {
        & {
          width: 100%;
          margin-top: 0.3rem;
          display: flex;
          flex-direction: column;
          padding-bottom: 0.3rem;
        }

        .top1 {
          & {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 0.1rem;
          }

          img {
            height: 0.2rem;
            width: 0.2rem;

          }

          span {
            margin-left: 0.08rem;
            font-size: 0.16rem;
            color: #101010;
            font-weight: bold;
          }

        }

        .item {
          & {
            margin-top: 0.22rem;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          }

          img {
            height: 1.25rem;
            width: 1rem;
            object-fit: cover;
            border-radius: 0.03rem;
          }

          .info {
            & {
              height: 1.25rem;
              width: calc(100% - 1rem - 0.2rem);
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            }

            .name {
              font-size: 0.16rem;
              color: #101010;
              width: 80%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .introduce {
              color: #BEBEBE;
              width: 100%;
              font-size: 0.13rem;
              line-height: 0.2rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              margin-bottom: 0.1rem;
            }

            .bottom {
              & {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-end;
              }

              .left {
                & {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  font-size: 0.12rem;
                  color: #CECECE;
                  width: calc(100% - 0.5rem);
                  overflow: hidden;
                }

                span {
                  margin-right: 0.05rem;
                }
              }

              .rate {
                width: 0.5rem;
                height: 0.22rem;
                color: var(--error);
                font-size: 0.13rem;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 0.05rem;
                border: 0.8px solid var(--error);
              }
            }

          }
        }

      }
    }
  }
}
